<template>
  <div class="section-page">
    <div class="tab-wrap">
      <div class="section-header">
        <h3 class="section-title">质量问题处理</h3>
        <el-form class="modify-form flex-center" inline>
          <el-form-item class="search-form-item">
            <div class="s-input" style="margin-top: 5px;">
              <input
                type="text"
                v-model="searchData.deviceCode"
                @keyup.enter="searchHandle"
                placeholder="单机代号"
              />
              <img
                src="@/assets/images/search.png"
                alt="搜索按钮"
                @click="searchHandle"
              />
            </div>
          </el-form-item>
          <el-form-item class="search-form-item">
            <el-button
              class="btn-add-primary"
              icon="el-icon-plus"
              @click="addHandle"
            ></el-button>
          </el-form-item>
          <el-form-item class="search-form-item">
            <import-data
              :api-url="importUrl"
              title="导入数据"
              :params="importParams"
              @upload-success="uploadSuccess"
            />
          </el-form-item>
          <el-form-item class="search-form-item">
            <a
              class="btn-40 btn-img hover"
              title="模板下载"
              :href="templateUrl"
              download="质量问题_模板.xlsx"
            >
              <span class="icon-img download"></span>
            </a>
          </el-form-item>
        </el-form>
      </div>
      <quality-table
        class="mt10"
        :loading="loading"
        :list="tableData"
        @refresh="refresh"
      ></quality-table>
      <div style="padding: 10px;text-align: center;">
        <el-pagination
          background
          size="large"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageOption.pageSize"
          :total="pageOption.total"
          :page-sizes="pageOption.sizes"
          @size-change="sizeCurrentChange"
          @current-change="pageCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <add-dialog v-if="showAdd" :model-id="this.id" @close="addCloseHandle" />
  </div>
</template>

<script>
import qualityApi from '@/apis/overview/quality'
import AddDialog from './AddDialog.vue'
import QualityTable from './QualityTable'
import ImportData from '@/components/ImportData.vue'
import templateUrl from '@/template/质量问题_模板.xlsx'

export default {
  props: ['id'],
  components: { QualityTable, AddDialog, ImportData },
  data() {
    return {
      searchData: {
        deviceCode: '',
      },
      pageOption: {
        page: 1,
        pageSize: 10,
        total: 0,
        sizes: [5, 10, 20, 30, 40, 50, 100],
      },
      loading: false,
      tableData: [],
      showAdd: false,
      templateUrl,
      importUrl: qualityApi.qualityImportUrl,
    }
  },
  computed: {
    importParams() {
      return {modelId: this.id}
    }
  },
  methods: {
    searchHandle() {
      this.pageOption.page = 1
      this.requestListData()
    },
    addHandle() {
      this.showAdd = true
    },
    refresh() {
      this.requestListData()
      this.$emit('refresh-sub')
    },
    sizeCurrentChange(size) {
      this.pageOption.pageSize = size
      this.requestListData()
    },
    pageCurrentChange(page) {
      this.pageOption.page = page
      this.requestListData()
    },
    requestListData() {
      const { page, pageSize } = this.pageOption
      this.loading = true
      qualityApi
        .findPageList({
          modelId: this.id,
          deviceCode: this.searchData.deviceCode,
          pageNum: page,
          pageSize,
        })
        .then(({ data }) => {
          const { list, total } = data
          this.tableData = list.map((item) => {
            item.edit = false
            return item
          })
          this.pageOption.total = total
          this.loading = false
        }).catch(() => {
          this.loading = true
        })
    },
    addCloseHandle(refresh) {
      if (refresh) {
        this.refresh()
      }
      this.showAdd = false
    },
    uploadSuccess() {
      this.searchData.deviceCode = ''
      this.pageCurrentChange(1)
    }
  },
  mounted() {
    this.requestListData()
  },
}
</script>

<style lang="scss" scoped>
.btn-add-primary {
  padding: 4px 3px;
}
</style>
